<template>
    <div class='login container'>
        <Header>
            <span>找回密码</span>
        </Header>
        <section>
            <div class='ipt tel'>
                <input type="text" placeholder="请输入密码" v-model='userPwd'>
            </div>
            <div class='login-btn' @click='login'>确认</div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from './Header'
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js'
export default{
    data () {
        return {
            userPwd:'',//用户输入的手机号
            rules:{//判断规则
                userPwd:{
                   ruls:/^\w{6,12}$/,
                   msg:'请输入有效6-12位密码'
                }
            }
        }
    },
    components:{
        Header,
        Tabbar
    },
    methods:{
        login(){
            let tel = this.$route.query.tel;
            //用户输入的验证码格式对不对
            if(  !this.validate( 'userPwd' )  ) return;
               
            http.$axios(  {
                url:'/api/recovery',
                method:'post',
                data:{
                   tel,
                   pwd:this.userPwd
                }
            }).then(res=>{
               if( res.success ){
                  Toast('修改成功，请登录');
                  this.$router.push('/pwdLogin')
               }
            })
        },
        //验证判断条件
        validate( params ){
             let bool = true;
             //如果输入格式不正确,提示信息
             if( !this.rules[params].ruls.test( this[params] )  ){
                 Toast(this.rules[params].msg);
                 bool=false;
                 return bool;
             }
             return bool;
        }
    }
}
</script>

<style scoped lang='scss'>
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:0.8rem 0.4rem;
    font-size:0.373333rem;
    background-color: #f5f5f5;
    .ipt{
        margin:0.266666rem 0;
        width: 8.933333rem;
        height: 1.173333rem;
        input{
            box-sizing: border-box;
            padding:0 0.266666rem;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            border-radius: 6px;
        }
    }
    .code{
        position:relative;
        button{
            position: absolute;
            right:0;
            height: 1.173333rem;
            padding:0 0.266666rem;
            color:#fff;
            background-color: #b0352f;
            border: none;
            outline: 0;
            border-radius: 6px;
        }
    }
    .login-btn{
        width: 8.933333rem;
        margin-top:0.266666rem;
        line-height: 1.2rem;
        color:#fff;
        text-align: center;
        background-color: #b0352f;
        border-radius: 6px;
    }
}
::v-deep .tabbar{
   border-top:2px solid #ccc;
}
</style>
